<template>
  <scroller class="outer"
            scroll-direction="horizontal">
    <div class="wrapper">
      <div class="head-wrapper">
        <div class="head" v-for="item in head" :key="item.name">
          <text class="head-text">{{item.value}}</text>
        </div>
      </div>
      <list>
        <cell class="head-wrapper"
              v-for="(item, num) in grid"
              :key="'line' + num"
              :style="{ backgroundColor: num % 2 === 0 ? 'white' : '#F7FAFF' }">
          <div  class="head"
                v-for="(value, key, index) in item" 
                :key="'line' + num + 'row' + index">
            <text class="head-text" style="color: #666666">{{item[head[index].name]}}</text>
          </div>
        </cell>
      </list>
    </div>
  </scroller>
</template>

<script>
export default {
  name: 'grid',
  props: ['head', 'grid']
}
</script>

<style lang="scss" scoped>
@import '../config/styles.scss';
.outer {
  flex-direction: row;
}
.wrapper {
  margin-top: 23px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #CCCCCC;
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: #CCCCCC;
}
.head-wrapper {
  background-color: #FFF8E3;
  flex-direction: row;
  height: 75px;
}
.head {
  width: 250px;
  align-items: center;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #CCCCCC;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #CCCCCC;
  justify-content: center;
}
.head-text {
  color: #3EAFFC;
  font-size: 25px;
  text-overflow: ellipsis;
  lines: 2;
}
</style>